// components/InfoAlert.tsx
"use client";

import {useState, FC, JSX} from "react";
import { Dialog } from "@headlessui/react";
import { InformationCircleIcon } from "@heroicons/react/24/outline";

export const InfoAlert: () => JSX.Element = () => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <>
            {/* 悬浮提示按钮 - 左上角定位 */}
            <div className="fixed right-4 top-4 z-50">
                <button
                    onClick={() => setIsOpen(true)}
                    className="p-3 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-full shadow-lg
                     transition-all hover:scale-110 group"
                >
                    <InformationCircleIcon className="w-8 h-8 text-amber-200 group-hover:text-amber-100" />
                </button>
            </div>

            {/* 对话框 */}
            <Dialog
                open={isOpen}
                onClose={() => setIsOpen(false)}
                className="relative z-50"
            >
                {/* 背景遮罩 */}
                <div className="fixed inset-0 bg-black/30 backdrop-blur-sm" />

                {/* 对话框内容 */}
                <div className="fixed inset-0 flex items-center justify-center p-4">
                    <Dialog.Panel className="w-full max-w-5xl min-h-[500px] rounded-2xl bg-gradient-to-br from-[#e7305e]/90 to-[#ff6680]/90 p-6 backdrop-blur-xl shadow-2xl">
                        {/* 内容区域需要添加滚动 */}
                        <div className="h-full flex flex-col">
                            <Dialog.Title className="text-2xl font-bold text-amber-100 mb-4 flex items-center gap-2">
                                <InformationCircleIcon className="w-8 h-8" />
                                操作指南
                            </Dialog.Title>

                        <div className="space-y-3 text-amber-50/90">
                            <p>🎯 请先完成以下步骤：</p>
                            <ul className="list-disc pl-6 space-y-2">
                                <li>1. 想一个您想使用的用户名，如：Jackson；(则您的userId=Jackson)</li>
                                <li>2. 请在url地址输入类似”http://117.72.55.173:3000/?userId=Jackson&activityId=100301“</li>
                                <li>3. 请在参加活动前先点击【装配活动抽奖配置·预热数据】</li>
                                <li>4. 完成上述步骤，您即可开始抽奖啦！</li>
                                <li>💡温馨提示：每日签到会为您返利-1次抽奖次数🎲+10用户积分⭐；同时，您可以通过右侧使用”积分⭐“兑换”抽奖次数🎲“</li>
                                <li>Thank you for your participation!</li>
                                <li>Hava a good luck!</li>
                            </ul>
                        </div>

                            <button
                                onClick={() => setIsOpen(false)}
                                className="mt-6 w-full py-2 bg-white/20 hover:bg-white/30 text-amber-100 rounded-lg
                                            transition-colors font-medium shrink-0"
                            >
                                好的
                            </button>
                        </div>
                    </Dialog.Panel>
                </div>
            </Dialog>
        </>
    );
};